import React, { Component } from 'React';
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import { connect } from 'react-redux'

import './style.less';

@connect(({ home }) => ({
  ...home,
}))
class Index extends Component {
  componentDidMount = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'home/fetch' })
  };

  //分享
  onShareAppMessage () {
    return {
      title: '基于Taro框架开发的商城',
      path: '/pages/home/index',
    };
  }

  // 小程序上拉加载
  onReachBottom () {

  }


  renderBanner = () => {
    const { banner } = this.props;
    return (
      <View className='swiper'>
        <Swiper
          className='swiper'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay
        >
          {banner && banner.length > 0 && banner.map(it => (
            <SwiperItem key={it.id}>
              <Image style={{ width: '100%', height: '100%' }} src={it.picUrl} />
            </SwiperItem>
          ))}
        </Swiper>
      </View>

    )
  }


  render () {
    // const { banner } = this.props;
    return (
      <View className='container'>
        {this.renderBanner()}
      </View>
    );
  }
}

export default Index;
